<template>
    <div class="dv">
        <p :style="{ color: colorSty }">{{ title }}</p>
        <el-button type="success" @click="Start">Start</el-button>
        <!-- <el-button type="danger" @click="Stop">Stop</el-button> -->
        <el-button type="info" @click="Clean">Clean</el-button>
        <h1>{{ int }}</h1>
        <span class="res-box">{{ str }}</span>
    </div>

</template>
<script setup>
import { ref, defineProps, computed } from 'vue'
import { ElMessage } from 'element-plus'

let props = defineProps(['title', 'syms'])

let colorSty = computed(() => {
    return props.title == '蓝球' ? '#1E90FF' : ''
})
let ballNum = computed(() => {
    if (props.syms == '大乐透') {
        return props.title == '蓝球' ? 2 : 5
    }else {
        return props.title == '蓝球' ? 1 : 6
    }
})
let luckNum = computed(() => {
    if (props.syms == '大乐透') {
        return props.title == '蓝球' ? 12 : 35
    }else {
        return props.title == '蓝球' ? 16 : 33
    }
    
})

const int = ref('01')
const setTime = ref(null)
const setTimeMD = ref(null)
const starTim = ref(null)
const arr = ref([])
const str = ref()
function Start() {    // 开启定时器之前 必须要先清除这个定时器，防止用户连续点击时候出现问题
    clearTimeout(setTimeMD.value)
    clearInterval(setTime.value)

    if (arr.value.length == ballNum.value) {
        ElMessage({
            message: '已经足够了',
            type: 'error',
        })
        return
    }
    setTime.value = setInterval(() => {
        int.value = Math.floor((Math.random() * luckNum.value) + 1)
        if (int.value < 10) {
            int.value = '0' + int.value
        }
    }, 5);
    setTimeMD.value = setTimeout(()=>{
        Stop()
    },8000)
}
function Stop() {
    clearInterval(setTime.value)

    arr.value.push(int.value)
    arr.value = Array.from(new Set(arr.value))
    let copyArr = JSON.parse(JSON.stringify(arr.value))
    str.value = copyArr.join(',')
    
    starTim.value = setTimeout(() => {
        Start()
    }, 2000);
}
function Clean(){
    int.value = '01'
    arr.value = []
    str.value = ''
    clearTimeout(setTimeMD.value)
    clearTimeout(starTim.value)
    clearInterval(setTime.value)
}
</script>
<style lang='scss' scoped>
.dv {
    border: 1px solid pink;
    padding: 15px;

    p {
        color: red;
        font-weight: 700;
    }

    .res-box {
        color: #000;
        font-size: 30px;
        font-weight: 500;
    }
}
</style>